<template>
  <view class="w100 flex flex-c">
    <!-- class="flex flex-s px-5 py-3 w100" -->
    <!-- #ifdef APP-PLUS || MP-ALIPAY -->
    <!--  class="flex flex-s w100" -->
    <view
      class="flex flex-c w100 mt"
      v-for="(item, index) in providerList"
      :key="index"
      @click="login(item)"
    >
      <view
        :class="item.icon + ' ' + item.bgColor"
        class="iconfont font-lg flex flex-c"
        style="width: 100rpx; height: 100rpx; border-radius: 100%; color: #fff"
      ></view>
    </view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">
      微信登录
    </button>
    <!-- #endif -->
  </view>
</template>

<script>
import { otherlogin } from "@/api/api";
export default {
  props: {
    back: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      providerList: [],
    };
  },
  mounted() {
    uni.getProvider({
      service: "oauth",
      success: (result) => {
        // console.log(result);
        let providerList = result.provider.map((value) => {
          let providerName = "";
          let icon = "";
          let bgColor = "";
          switch (value) {
            case "weixin":
              providerName = "微信登录";
              icon = "icon-weixin";
              bgColor = "bg-success";
              break;
            case "qq":
              providerName = "QQ登录";
              icon = "icon-QQ";
              bgColor = "bg-primary";
              break;
            case "sinaweibo":
              providerName = "新浪微博登录";
              icon = "icon-xinlangweibo";
              bgColor = "bg-warning";
              break;
            default:
              return;
          }
          return {
            name: providerName,
            id: value,
            icon: icon,
            bgColor: bgColor,
          };
        });
        this.providerList = providerList.filter((item) => {
          if (typeof item !== "undefined") {
            // console.log(item);
            return item;
          }
          //   console.log(typeof item);
          //   console.log(item!=='{}')
        });
        console.log("providerList-----", this.providerList);
      },
      fail: (error) => {
        console.log("获取登录通道失败", error);
      },
    });
  },
  methods: {
    // 登录
    login(item) {
      console.log(item);
      uni.login({
        provider: item.id,
        // #ifdef MP-ALIPAY
        scopes: "auth_user", //支付宝小程序需设置授权类型
        // #endif
        success: (res) => {
          console.log(res);
          /*
						{
							"authResult": {
								"access_token": "28_ceqdzxESqQwYEFKp6LjgHZkUxkMpF6MqvCi0gr-Spwurp87utuxkHTr0nZFh7-TNZTQ4ds5ufnRoGnLsFw59NLWPWs3MNrZpOg1IsoQmfoE",
								"expires_in": 7200,
								"refresh_token": "28_FAqK9VRNebbvKiEBgG3V9lC5NHEGRuhnoXS3pkGdE3M2GTPmd2eVFWBRNbcAwF5heXPb4RWMmCXeYJOiaTUzn0TlXIcD4xFO3CnkShN5ObU",
								"openid": "oRrdQt3HS3Ns2TFCVLMOyxbR9DcM",
								"scope": "snsapi_userinfo",
								"unionid": "oU5Yytz7ielo7Xw00LMgZsPeSDkQ"
							},
							"errMsg": "login:ok"
						}
						*/
          // 获取用户信息
          uni.getUserInfo({
            provider: item.id,
            success: (infoRes) => {
              // 这些是接口需要的数据
              let obj = {
                provider: item.id,
                openid: infoRes.userInfo.openId,
                expires_in: 0,
                nickName: infoRes.userInfo.nickName,
                avatarUrl: infoRes.userInfo.avatarUrl,
              };
              this.loginEvent(obj);
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: "登录失败",
            icon: "none",
          });
        },
      });
    },
    // 登录逻辑
    async loginEvent(data) {
      let res = await otherlogin(data);
      console.log(res);
      if (res.id) {
        this.$store.commit("isLogin", this.$U.formatUserinfo(res));
        uni.navigateBack({ deleta: 1 });
        uni.showToast({
          title: "登录成功",
          icon: "none",
        });
      } else {
        uni.showToast({
          title: "登录失败",
          icon: "none",
        });
      }
    },
    // #ifdef MP-WEIXIN
    mpGetUserInfo(result) {
      uni.showLoading({ title: "登录中...", mask: true });
      // 获取失败
      if (result.detail.errMsg !== "getUserInfo:ok") {
        uni.hideLoading();
        uni.showModal({
          title: "获取用户信息失败",
          content: "错误原因" + result.detail.errMsg,
          showCancel: false,
        });
        return;
      }
      let userinfo = result.detail.userInfo;
      uni.login({
        provider: "weixin",
        success: (res) => {
          this.MpLogin({
            url: "/wxlogin",
            code: res.code,
            nickName: userinfo.nickName,
            avatarUrl: userinfo.avatarUrl,
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    // #endif
    MpLogin(options) {
      // this.$H.post(options.url,{
      // 	code:options.code,
      // 	nickName:options.nickName,
      // 	avatarUrl:options.avatarUrl
      // }).then(data=>{
      // 	// 修改vuex的state,持久化存储
      // 	this.$store.commit('login',this.$U.formatUserinfo(data))
      // 	// 返回上一页
      // 	if(this.back){
      // 		uni.navigateBack({
      // 			delta: 1
      // 		});
      // 	}
      // 	uni.showToast({
      // 		title: '登录成功',
      // 		icon: 'none'
      // 	});
      // });
    },
  },
};
</script>
